<template>
	<!-- 新增、编辑钱包 -->
	<view class="add-wallet-box">
		<nav-bar :title="i18n.wallet.addWallet" @_back="_back" />
		<view class="container">
			<custom-list :title="i18n.wallet.currency">
				<view class="dis-between" @click="openCurrency">
					<text class="white-text currency-text">{{currentcy}}</text>
					<u-icon name="arrow-down" color="rgba(255, 255, 255, .4)" size="12"></u-icon>
				</view>
			</custom-list>
			<custom-list :title="i18n.wallet.chain" :isHeng="false">
				<view class="lian-box">
					<view class="default-btn" :class="lianCurrent === item.id? 'main-bg': ''" v-for="item in lianList" :key="item.id"
					 @click="lianClick(item)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</custom-list>
			<custom-list :title="i18n.wallet.walletAddress">
				<input type="text" v-model="info.address" :placeholder="i18n.wallet.enterAddress">
			</custom-list>
			<custom-list :title="i18n.wallet.notes">
				<input type="text" v-model="info.notes" :placeholder="i18n.wallet.enterNotes" :maxlength="25">
			</custom-list>
			<custom-list :title="i18n.wallet.uploadText" :isHeng="false">
				<u-upload :action="action" ref="uUpload" :custom-btn="true" width="300" height="300" max-count="1">
					<image v-if="info.upimg" slot="addBtn" class="upload-btn"  :src="info.upimg"></image>
					<view slot="addBtn" class="upload-btn" v-else>
						<view>
							<u-icon name="plus-circle" size="88" color="rgba(255, 255, 255, .3)"></u-icon>
							<text class="text-box">{{i18n.wallet.uploadText}}</text>
						</view>
					</view>
				</u-upload>
			</custom-list>
			<custom-submit @click="submit" :loading="loading" style="margin: 90rpx 0 20rpx;" :title="i18n.common.confirm"></custom-submit>
		</view>
		<!-- 选择币种 -->
		<select-currency ref="sleCurrency" :currentId="info.currency_id" :list="currencyList" @click="currentCyClick"></select-currency>
	</view>
	</view>
</template>

<script>
	import mixin from '@/utils/minix.js'
	import CustomList from '@/components/CustomList/index.vue'
	import SelectCurrency from '@/components/SelectCurrency/vue.vue'
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		walletAddaddress,
		walletGetAddressinfo
	} from '@/api/index.js'
	import {
		Toast
	} from '@/utils/util.js'
	export default {
		mixins: [mixin],
		components: {
			CustomList,
			SelectCurrency,
			CustomSubmit
		},
		computed: {
			...mapGetters(['token', 'currencyList']),
			i18n() {
				return this.$t('message');
			},
		},
		data() {
			return {
				lianList: [{
						name: 'ERC20',
						id: 0
					},
					{
						name: 'OMNI',
						id: 1
					},
				],
				lianCurrent: 0,
				info: {
					links: 'ERC20',
					upimg: ''
				},
				action: 'http://13860.shikecm.com/api/upload',
				currentcy: '',
				loading: false
			}
		},
		onLoad(parmars) {
			// console.log(parmars.id !== 'undefined')
			if (parmars.id !== 'undefined') {
				this.getInfo(parmars.id);
			};
			this.$nextTick(() => {
				for (let i in this.currencyList) {
					if (this.currencyList[i].title === 'USDT') {
						this.info.currency_id = this.currencyList[i].id
						this.currentcy = this.currencyList[i].title
					}
				}
			})
		},
		methods: {
			lianClick(item) {
				if (this.lianCurrent === item.id) return;
				this.lianCurrent = item.id;
				this.info.links = item.name
			},
			openCurrency() {
				this.$refs.sleCurrency.open();
			},
			currentCyClick(val) {
				this.currentcy = val.name;
				this.info.currency_id = val.id;
			},
			async submit() {
				await this.onListChange() 
				this.info.token = this.token;
				this.loading = true;
				let {
					error,
					res
				} = await walletAddaddress(this.info);
				if (error) return this.loading = false;;
				await Toast(this.i18n.common.addSuccess);
				this.loading = false;
				this.$store.dispatch('wallet/getWalletList').then(() => {
					uni.redirectTo({
						url: '/pages/wallet/index'
					})
				})
			},
			async onListChange() {
				let lists = this.$refs.uUpload.lists;
				if (!lists.length) return false;
				for (let i in lists) {
					this.info.upimg = lists[i].response.message;
				}
				// return true;
			},
			async getInfo(id) {
				let {
					error,
					res
				} = await walletGetAddressinfo({
					token: this.token,
					address_id: id
				});
				if (error) return;
				this.info = res[0];
				this.info.currency_id = this.info.currency
				for (let i in this.currencyList) {
					if (this.currencyList[i].id === this.info.currency) {
						this.currentcy = this.currencyList[i].title;
					}
				}
				
				for(let o in this.lianList) {
					if (this.lianList[o].name === this.info.links) {
						this.lianCurrent = this.lianList[o].id;
					}
				}
		
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-wallet-box {
		.lian-box {
			display: flex;

			&>view {
				height: 80rpx;
				border-radius: 16rpx;

				&:first-child {
					margin-right: 30rpx;
				}
			}
		}

		.upload-btn {
			width: 300rpx;
			height: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			border-radius: 16rpx;
			background-color: #7a7d8c;

			&>view {
				text-align: center;
			}

			.text-box {
				display: block;
				color: rgba(255, 255, 255, .54);
				font-size: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				margin-top: 30rpx;
			}
		}

		.currency-text {
			height: 40rpx;
		}
	}
</style>
